<!-- 标题栏 -->
<template>
	<div class="title-banner">
		<div class="title-content">
			<div class="title-box">
				<div class="circle"></div>
				<div>{{ title }}</div>
			</div>
			<div style="display: flex; align-items: center; margin-bottom: 10px">
				<slot></slot>
				<div class="button-box">
					<el-link v-if="!noBack" :underline="false" class="banner-icon-box" @click="handlerGoBack">
						<img src="~@/assets/icons/png/ops-workbench/back.png" /><span class="btn-text">返回</span>
					</el-link>
					<el-link :underline="false" class="banner-icon-box" @click="handleGoHome">
						<img src="~@/assets/icons/png/ops-workbench/home.png" /><span class="btn-text">回到首页</span>
					</el-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="titleBanner" lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
	title: {
		type: String,
		default: '',
	},
	noBack: {
		type: Boolean,
		default: false,
	},
});

// 返回
function handlerGoBack() {
	router.go(-1);
}
// 回到首页
function handleGoHome() {
	router.push('/ops-workbench/opsIndex');
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title-banner {
	height: 36px;
	width: 100%;
	padding: 0 10px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #5d88a9;
	.title-content {
		width: 1440px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-box {
			display: flex;
			align-items: center;
		}
		.button-box {
			.banner-icon-box {
				color: #ffffff;
				font-size: 16px;
				margin-right: 15px;
				img {
					vertical-align: middle;
				}
				.btn-text {
					float: right;
					margin-top: 2px;
					margin-left: 5px;
				}
			}
		}
	}
}
</style>
